<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="kityformula/assets/styles/base.css">
    <link rel="stylesheet" href="kityformula/assets/styles/ui.css">
    <link rel="stylesheet" href="kityformula/assets/styles/scrollbar.css">
    <style>
        html, body {
            padding: 0;
            margin: 0;
        }
        .kf-editor {
            width: 780px;
            height: 380px;
        }
        #loading {
            height: 32px;
            width: 340px;
            line-height: 32px;
            position: absolute;
            top: 42%;
            left: 50%;
            margin-left: -170px;
            font-family: arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
        }
        #loading img {
            position: absolute;
        }
        #loading p {
            display: block;
            position: absolute;
            left: 40px;
            top: 0px;
            margin: 0;
        }

    </style>
    <title></title>
</head>
<body>
<div id="kfEditorContainer" class="kf-editor">
    <div id="tips" class="tips">
        sorry! Beta版本仅支持IE9及以上版本的浏览器，正式版本将会支持低版本浏览器，谢谢您的关注！
    </div>
</div>

<script src="./kityformula/js/jquery-1.11.0.min.js"></script>
<script src="./kityformula/js/kitygraph.all.js"></script>
<script src="./kityformula/js/kity-formula-render.all.js"></script>
<script src="./kityformula/js/kity-formula-parser.all.min.js"></script>
<script src="./kityformula/js/kityformula-editor.all.min.js"></script>
<script>
    jQuery( function ($) {
        if ( document.body.addEventListener ) {

            var parent = window.parent;

            $( "#tips").html('<div id="loading"><img src="kityformula/loading.gif" alt="loading" /><p>正在加载，请耐心等待...</p></div>' );

            var factory = kf.EditorFactory.create( $( "#kfEditorContainer" )[ 0 ], {
                render: {
                    fontsize: 24
                },
                resource: {
                    path: "./kityformula/resource/"
                }
            } );

            factory.ready( function ( KFEditor ) {
                $( "#tips").remove();

                window.kfe = this;

                

                parent.postMessage({
                    mceAction: 'execCommand',
                    cmd: 'initKity'
                }, '*');
            });
            var renderPage = function(imgLatex) {
                kfe.execCommand( "render", imgLatex || "\\placeholder" );
                kfe.execCommand( "focus" );
            }

            window.addEventListener('message', (event) => {
                // console.log('msg-child:::', event.data)
                
                var data = event.data;
                if(data.type === "render") {
                    renderPage(data.content);
                    return;
                }
                if(data.type === "save") {
                    kfe.execCommand('get.image.data', function(data) {
                        var latex = kfe.execCommand('get.source');
                        data.latex = latex;
                        var value = '<img class="kfformula" src="'+ data.img +'" data-latex="' + latex + '" />';

                        parent.postMessage({
                            mceAction: 'insertContent',
                            content: value
                        }, '*');
                    });
                    return;
                }
            }, false);
        } else {
            $( "#tips").css( "color", "black" );
            $( "#tips").css( "padding", "10px" );
        }

    } );
</script>
</body>
</html>